<!--代码逻辑和样式库-->
<script src="./module-management.component.js"></script>
<style src="./module-management.scss" scoped lang="scss"></style>

<template>
  <div>
    <!--  内容区  -->
    <div class="content-container">
      <el-row :gutter="10" type="flex" class="aq-padding-top-16">
        <el-col :span="14">
          <el-col :span="18">
            <el-tabs v-model="activeNavName" type="card" @tab-click="handleClick">
              <el-tab-pane v-for="(radio, idx) of topNavList" :key="idx" :label="radio.name" :name="radio.objectId"></el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="6" align="right">
            <!-- 操作按钮 -->
            <el-button v-waves v-if="codesCheck.indexOf('Create') !== -1" type="success" icon="el-icon-plus" @click="openCreateOrEditMenuDialog('createTop', {})">
              新建根模块
            </el-button>
          </el-col>
        </el-col>
        <el-col :span="10" align="right">
          <el-button v-if="codesCheck.indexOf('Create') !== -1" v-waves class="filter-item" type="success" icon="el-icon-plus" @click="openCreateOrEditCodeDialog()">
            新建操作码
          </el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="14" class="scroll-container">
          <el-table :data="treeData" row-key="name" border highlight-current-row @row-click="getCodeList" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="name" label="模块名称" />
            <el-table-column prop="path" label="url" />
            <el-table-column prop="sort" label="排序" width="50" align="center" />
            <el-table-column prop="remark" label="说明" width="100" />
            <el-table-column label="操作" width="240px" align="center">
              <template slot-scope="scope">
                <el-button v-if="codesCheck.indexOf('Create') !== -1" size="mini" type="primary" plain @click="openCreateOrEditMenuDialog('create',scope.row)">创建下级</el-button>
                <el-button v-if="codesCheck.indexOf('Edit') !== -1" size="mini" type="success" plain @click="openCreateOrEditMenuDialog('edit',scope.row)">编辑</el-button>
                <el-button v-if="codesCheck.indexOf('Delete') !== -1" size="mini" type="danger" plain @click="deleteSelectedData(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="10">
          <el-table :data="keyCodeList" border fit highlight-current-row>
            <el-table-column label="名称" align="center" prop="name" />
            <el-table-column label="操作码" align="center" prop="permission" />
            <el-table-column label="URI" align="center" prop="uri" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- <el-button type="primary" icon="el-icon-edit" circle @click="openCreateOrEditCodeDialog(scope.row)"></el-button> -->
                <el-button type="danger" icon="el-icon-delete" circle @click="confirmDeleteKeyCode(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <create-menu v-if="createOrEditMenuDialogVisible" :type="menuType" :menus="selectMenu" :active-nav="activeNavName" @reload="reload()" @close="closeCreateOrEditMenuDialog"></create-menu>
    <create-code v-if="createOrEditCodeDialogVisible" :codes="selectCode" @reload="reloadCode()" @close="closeCreateOrEditCodeDialog"></create-code>
  </div>
</template>
